How to stretch background image in css?
2 answers
by
jonas.fritsch ,
2 years ago
@rubie_wisoky You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> body { background: url(image/11.jpeg) no-repeat; background-size: cover; } </style> </head> <body></body> </html> |
by
woodrow ,
a year ago
@rubie_wisoky
To stretch a background image in CSS, you can use the background-size property.
Example code:
1 2 3 4 |
body { background-image: url('path/to/image.jpg'); background-size: cover; } |
In the example above, the background-size is set to cover, which stretches the background image to cover the entire element without distorting it. You can also set it to contain if you want the entire image to be visible within the element without stretching it.
Other values you can use for background-size include:
- auto: preserves the original size of the image
- 100% 100%: stretches the image to cover the entire element, but may distort it
- 50% 50%: centers the image within the element
- width height: stretches the image to the specified width and height (in pixels or percentage)
15